<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />

        <title>【大话2】选秀</title>

        <link rel="stylesheet" href="css/index.css" />

        <!--[if lt IE 9]>
        <link rel="stylesheet" href="css/ltIE9.css" />
        <![endif]-->

    </head>

    <body>
        <!--<div id="NIE-topBar"></div>-->
        <div id="sidebar">
            <img src="img/sidebar.png" />
            <div id="share">

            </div>
        </div>
        <div id="page">
            <div class="container">
                <a href="#" id="logo"><img src="img/logo.png" /></a>

            </div>

            <div id="title">

            </div>
            <div id="step">

            </div>
            <div id="bonus">
                <a href="http://gift.163.com/script/buyer/product_list?sub_form_id=7&list_type=1&sort_type=0&game_type_id=5" target="_blank" style="position: relative;display: inline-block;top: 10px;right:-440px;width:150px;height:150px;border-radius: 75px;"></a>
            </div>

            <img id="img01" src="img/img01.png" />

            <div id="buttons" class="clearfix">
                <div class="button modal_btn" id="button1" data-modal="#oneMinuteVideo" >

                </div>
                <div class="button modal_btn" id="button2" data-modal="#competitionContent">

                </div>
                <div class="button modal_btn" id="button3" data-modal="#howToSignUp">

                </div>
            </div>
        </div>

        <div id="helper_wrapper" >
            <div id="helper" class="">
                <div id="helper_left">
                    <div id="helper_logo">
                        <img src="img/helper.png" />
                    </div>
                    <div id="helper_download">
                        <div id="helper_code">
                            <img src="img/helper_code.png" />
                            <span><font style="color: red;">·</font>扫描二维码下载</span>
                        </div>
                        <div id="helper_buttons">
                            <a id="helper_button1" href="http://zs.163.com/xy2/" target="_blank"> </a>
                            <a id="helper_button2" href="http://zs.163.com/xy2/" target="_blank"> </a>
                        </div>
                    </div>
                </div>
                <div id="helper_right">
                    <img src="img/phones.png" />
                </div>
                <div style="clear: both;"></div>
            </div>
        </div>
        <style>
            #NIE-copyRight a {
                text-decoration: none;
                color: #111;
            }
        </style>
        <div id="NIE-copyRight" style="margin:50px 0px; "></div>

        <div class="none" id="mask"></div>

        <div class="modal out" id="competitionContent">
            <div class="modal_head">
                <button class="close"></button>
                <p>
                    比赛内容
                </p>
            </div>
            <div class="modal_body">
                <div class="section">
                    <h1>脱口秀：《吹弹大话》</h1>
                    <p>
                        在《大话2》的一个称谓任务中，孙悟空因三打白骨精被唐僧误会、一气之下出走，师徒三人走到波月洞附近，人困马乏，恰好遇见了你，在你的帮助下成功的化解了师徒四人的危机。问题来了：你怎么看《西游记》中猪八戒化缘、孙悟空卖命、唐僧就管念经的设定呢？用你最美的声音跟世界分享你的见解！做成一档脱口秀栏目吧。
                    </p>
                </div>
                <div class="section">
                    <h1>经典配音：《跑调大话》</h1>
                    <p>
                        “曾经有一段真挚的感情摆在我的面前我没有珍惜，等我失去的时候才追悔莫及，人间最痛苦的事莫过于此，你的剑在我的咽喉上刺下去吧，不用在犹豫了！如果上天能给我一次再来一次的机会，我会对那个女孩说三个字：我爱你，如果非要在这份爱上加一个期限，我希望是一万年！”用你最具特色、最自信的声音把他读出来吧！你也可以把原句稍作改编讲述一段令你感到虐心、难忘、感动、抽搐、不吐不快情感经历。
                    </p>
                </div>
            </div>
            <div class="modal_foot">
                <div>
                    <style>
                        /*仅对这个modal有效的样式*/
                        #competitionContent ul li {
                            font-size: 13px;
                            color: #666;
                            line-height: 1.6em;
                            margin-bottom: 5px;
                        }

                    </style>
                    <span style="display:inline-block;font-size: 18px;font-weight: bold;margin-bottom: 10px;">要求</span>
                    <ul style="list-style: none;">
                        <li>
                            1、参与者两题合成在一段音频后上传。
                        </li>
                        <li>
                            2、参与者可以根据情景自行添加背景音乐或进行后期剪辑。(说明：此项要求不是必完成项，参与者可对作品进行后期处理也可以不做后期)
                        </li>
                        <li>
                            3、主办方将根据实力、人气评选出20名入围选手。（说明：“人气”将根据作品被点赞的次数评定，以@大话2寻找知音大赛 私信回复确认晋级作品唯一有效）
                        </li>
                        <li>
                            4、所有进入复赛的选手的作品，将在”新大话西游2“官网上集中展示，届时选手可以呼唤亲朋好友帮忙投票！
                        </li>
                        <li>
                            5、决赛采用：评委打分（占50%）+官网投票（占50%）。
                        </li>
                    </ul>

                </div>
            </div>
        </div>

        <div class="modal out" id="howToSignUp">
            <div class="modal_head">
                <button class="close"></button>
                <p>
                    报名方式
                </p>
            </div>
            <div class="modal_body">
                <div class="section">
                    <h1>1、在喜马拉雅fm（<a href="http://www.ximalaya.com/#/10130220/profile" target="_blank">http://www.ximalaya.com/</a>）注册账号</h1>
                    <img class="border" src="img/signUp_1_1.jpg" />
                    <img src="img/signUp_1_2.png" />
                </div>
                <div class="section">
                    <h1>2、上传作品，设置名称为：【寻找大话知音】－姓名</h1>
                    <img class="border" src="img/signUp_2_1.jpg" />
                </div>
                <div class="section">
                    <h1>3、在评论中@大话2寻找知音大赛 并附上联系方式（QQ）</h1>
                    <img class="border" src="img/signUp_3_1.jpg" />
                </div>
            </div>

        </div>

        <div class="modal out" id="oneMinuteVideo">
            <div class="modal_head">
                <button class="close"></button>
                <p>
                    1分钟了解比赛
                </p>
            </div>
            <div class="modal_body">
                <div class="section" style="width: 484px;margin:50px auto;">

                </div>
            </div>
        </div>

        <script src="js/jquery(mixNIE).last.js" ></script>
        <script src="js/index.js"></script>
        <script>
            $(function() {
                //滚动监听，移动sidebar

                window.onscroll = function() {
                    var offset;

                    if($(window).height() >= 768) {
                        offset = 200;
                    } else {
                        offset = 100;
                    }

                    var top = window.scrollY + offset;

                    $("#sidebar").css({
                        "top" : top
                    });
                }

                window.onresize = function() {

                    var left = $("#button3").offset().left + $("#button3").width() + 100;

                    $("#sidebar").css({
                        "left" : left
                    });
                }
                
                $(window).trigger("resize");
            })
        </script>

    </body>

</html>